<template>
  <a-spin :spinning="spinning">
    <div>
      <a-layout>
        <a-layout-sider v-model="collapsed" theme="light" width="280" collapsible collapsed-width="0" :reverse-arrow="reverseArrow">
          <treeTplList
            ref="treeTplList"
            :defPanelWidth="22"
            table-id="treeTplList"
            :init-src-label="initSrcLabel"
            :table-echart-id="tableEchartId"
            :table-event="tableEvent"
            :table-obj-param="tableObjUpParam"
            @tableChangeEvent="tableChangeEvent"
            @uiChangeEvent="uiChangeEvent"
            @openTreeMenuSelect="openTreeMenuSelect"
            @openTableMenuDelete="openTableMenuDelete"
            @openGeneralModal="openGeneralModal"
            @processCustomRowOnClick="processCustomRowOnClick"
          />
        </a-layout-sider>
        <a-layout>
          <a-layout-content style="background: #fff;margin: 0 16px">
            <tableTplList
              ref="downTableTplList"
              :defPanelWidth="65"
              table-id="downTableTplList"
              :init-src-label="initSrcLabel"
              :table-echart-id="tableEchartId"
              :table-event="tableDownEvent"
              :table-obj-param="tableObjDownParam"
              @openTableMenuSelect="openTableMenuSelect"
              @openTableMenuDelete="openTableMenuDelete"
              @openGeneralModal="openGeneralModal"
              @processCustomRowOnClick="processCustomRowOnClick"
            />
          </a-layout-content>
        </a-layout>
      </a-layout>
      <!-- table区域-end -->
      <formTplModalTemplate ref="formTplModal" name="formTplModal" @reloadLoadData="reloadLoadData" />
      <uiModalTemplate ref="uiModal" @returnQuickSelectRows="returnQuickSelectRows" />
      <listAndListModalTemplate ref="listAndListModal" @returnQuickSelectRows="returnQuickSelectRows" />
      <treeAndListModalTemplate ref="treeAndListModal" @returnQuickSelectRows="returnQuickSelectRows" />
      <treeNodeModalTemplate ref="treeNodeModal" @returnQuickSelectRows="returnQuickSelectRows" />
    </div>
  </a-spin>
</template>

<script>
import { changePanelElUiVal } from '@/utils/hypanel'
import { getQuickSetLocalListData
  , loadUIMethod, getQuickSubmitRemoteData, getQuickSetLocalTreeData, triggerRefOpenReturn } from '@/utils/auth'
import { getInitLoadUiPageUrlDataParam, openLoadGeneralModal, getChangeInitSrcObj } from '@/utils/hyopen'
import { getTplKeyObj } from '@/utils/hyctr'
import { getFnInputParam } from '@/utils/hyurl'
import { getCheckRecordKeyStr } from '../../../../utils/hyrecord'
export default {
  name: 'TreeAndListUi',
  components: {
    treeTplList: () => import('./treeTplList.vue'),
    tableTplList: () => import('./tableTplList.vue'),
    formTplModalTemplate: () => import('./formTplModal.vue'),
    uiModalTemplate: () => import('./uiModal.vue'),
    listAndListModalTemplate: () => import('./listAndListModal.vue'),
    treeAndListModalTemplate: () => import('./treeAndListModal.vue'),
    treeNodeModalTemplate: () => import('./treeNodeModal.vue')
  },
  props: ['S_PAGE_ID', 'S_PAGE_VER', 'S_PARTITION', 'pageUrlData', 'selectType'],
  data() {
    return {
      globalData: {},
      triggerOpenParam: {},
      initSrcObj: { initSrcUrl: undefined, initSrcLabel: undefined },
      initLoadObj: { loadFormId: '', loadBtnId: '', loadListId: '' },
      uiParamData: {},
      initReturnSetFormData: {},
      initReturnSetListData: {},
      tableSelectedRow: [],
      treeSelectedRow: [],
      title: '',
      initSrcLabel: 'list',
      showTreeTplKey: 'treeTplList',
      showTableTplKey: 'downTableTplList',
      showTableNowKey: null,
      showTreeNowKey: null,
      spinning: true,
      nowRow: {},
      collapsed: false,
      reverseArrow: true,
      tableEchartId: 'tableEchartId',
      tableObjDownParam: { rowOnClick: false, selectFirstRow: 'selectFirstRow', showEchart: false },
      tableObjUpParam: { rowOnClick: true, selectFirstRow: 'selectFirstRow', defalutSearchQuery: 'searchQuery', showEchart: false },
      tableEvent: { update: 'openTableMenuUpdate', delete: 'openTableMenuDelete', insert: 'openTableMenuInsert', select: 'openTreeMenuSelect', copy: 'openTableMenuCopy', detail: 'openTableMenuDetail', selectNode: 'openTreeMenuSelect', load: 'openTableLoad', menuLoad: 'openTableMenuLoad', tableModal: 'openTableModal', menuModal: 'openTableMenuModal', generalModal: 'openGeneralModal', setData: 'openSetDataTableModal', saveSearchForm: 'saveTableSearchForm', rowOnClick: 'processCustomRowOnClick' },
      tableDownEvent: { update: 'openTableMenuUpdate', delete: 'openTableMenuDelete', insert: 'openTableMenuInsert', select: 'openTableMenuSelect', copy: 'openTableMenuCopy', detail: 'openTableMenuDetail', load: 'openTableLoad', menuLoad: 'openTableMenuLoad', tableModal: 'openTableModal', menuModal: 'openTableMenuModal', generalModal: 'openGeneralModal', setData: 'openSetDataTableModal', saveSearchForm: 'saveTableSearchForm', rowOnClick: 'processCustomRowOnClick' },
      subFormPanelModalId: 'subFormPanelModalId',
      openParam: {},
      localParam: {},
      parentRefOpen: {},
      uiPageUrl: {},
      tableExtProp: {},
      formTplModal: 'formTplModal',
      searchFormParam: {},
      loading: false,
      uidata: {},
      nowBtnItem: {},
      // 表头
      columns: [],
      dealApi: {
        list: { S_PAGE_ID: '', S_PAGE_VER: '' }
      },
      dealParam: {
        list: { S_DY_PARAM: [] }
      }
    }
  },
  /**    **/
  computed: {
  },
  watch: {
  },
  mounted() {
    if (this.pageUrlData !== undefined) {
      this.initSrcObj = this.pageUrlData.initSrcObj
    }
    this.clientWidth = document.body.clientWidth
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
        console.log('that.screenWidth',that.screenWidth)
      })()
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 因为当钩子执行前，组件实例还没被创建
      // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
    })
  },
  beforeRouteUpdate(to, from, next) {
    this.S_PAGE_ID = to.params.S_PAGE_ID
    this.S_PAGE_VER = to.params.S_PAGE_VER
    this.initUI()
    next()
  },
  beforeRouteLeave(to, from, next) {
    next()
  },
  created() {
    const _this = this
    _this.openParam = Object.assign({}, _this.openParam, _this.$route.query)
    _this.initUI()
  },
  methods: {
    initTableUi(data) {
      const thisObj = this
      thisObj.showTableNowKey = null
      thisObj.uidata = Object.assign({}, data)
    },
    changeTableUi(tplKey, param, newInitSrcObj) {
      const thisObj = this
      const panelEl = changePanelElUiVal(thisObj.uidata, tplKey, param)
      if (panelEl !== null) {
        const showKey = panelEl.dataKey
        const tplGlobalData = {}
        tplGlobalData.globalParam = param
        tplGlobalData.openParam = param
        tplGlobalData.formModel = thisObj.formModel
        const newParam = getFnInputParam(thisObj, tplGlobalData, panelEl.refSetVal)
        const initSrcPanelElObj = getChangeInitSrcObj(thisObj, panelEl, newInitSrcObj)
        thisObj.changeTableUiKey(tplKey, showKey, newParam, initSrcPanelElObj)
      }
    },
    changeTableUiKey(tplKey, showKey, param, initSrcObj) {
      const thisObj = this
      // 做一个面板里面多个table数据切换
      if (tplKey === thisObj.showTableTplKey) {
        if (thisObj.showTableNowKey !== showKey) {
          thisObj.showTableNowKey = showKey
          const initUiVal = thisObj.uidata[showKey]
          if (initUiVal !== null) {
            if (thisObj.$refs[tplKey] !== undefined) {
              thisObj.$refs[tplKey].initUI(initUiVal, param, initSrcObj)
              thisObj.$refs[tplKey].otherCompSetValOpenParam(null, param, initSrcObj)
            }
          }
        } else {
          thisObj.$refs[tplKey].otherCompSetValOpenParam(null, param, initSrcObj)
        }
      } else {
        const treeSrcObj = Object.assign({}, initSrcObj)
        treeSrcObj.initSrcType = 'radio'
        if (thisObj.showTreeNowKey !== showKey) {
          thisObj.showTreeNowKey = showKey
          const initUiVal = thisObj.uidata[showKey]
          if (initUiVal !== null) {
            thisObj.$refs[tplKey].initUI(initUiVal, param, treeSrcObj)
            thisObj.$refs[tplKey].changeAppContainnerCssObj()
          }
        } else {
          thisObj.$refs[tplKey].otherCompSetValOpenParam(null, param, treeSrcObj)
        }
      }
    },
    tableChangeEvent(formItem, triggerObj, localParamDataSet, selectedRow) {
      const thisObj = this
      console.log('表格变化统一formItem.', formItem)
      console.log('表格变化统一事件接口.', triggerObj)
      console.log('表格变化统一事件接口 localParamDataSet.', localParamDataSet)
      console.log('表格变化统一事件接口 selectedRow.', selectedRow)
      // const changeOpenParam = this.openParam
      // changeOpenParam 做入参适配
      const changeOpenParam = localParamDataSet
      thisObj.tableChangeEventControlObj(formItem, triggerObj, changeOpenParam)
    },
    tableChangeEventControlObj(formItem, triggerObj, changeOpenParam) {
      const thisObj = this
      const I_TRIGGER_OBJ = triggerObj.i_TRIGGER_OBJ
      if (I_TRIGGER_OBJ === 7) {
        // 执行面板呈现规则
        thisObj.showTableIdKey = triggerObj.s_RULE_TPL_KEY
        thisObj.changeTableUi(thisObj.showTableIdKey, changeOpenParam)
      } else {
        console.log('表格变化统一控制事件接口.', triggerObj)
      }
    },
    uiChangeEvent(formItem, triggerObj, localParamDataSet, selectedRow) {
      const changeOpenParam = selectedRow
      const tplKey = triggerObj.s_RULE_PANEL_SHOW_KEY
      const showKey = triggerObj.s_RULE_PANEL_NEW_REF_KEY
      this.changeTableUiKey(tplKey, showKey, changeOpenParam)
      console.log('localParamDataSet', localParamDataSet)
      console.log(' selectedRow', selectedRow)
      // this.$refs[tplKey].otherCompSetValOpenParam(triggerObj, changeOpenParam)
    },
    // loadNode(node, resolve) {
    //   console.log('loadNode...', this.$refs.tree)
    //   if (node.level === 0) {
    //     return resolve([{ name: 'region' }])
    //   }
    //   if (node.level > 1) return resolve([])
    //
    //   setTimeout(() => {
    //     const data = [{
    //       name: 'leaf',
    //       leaf: true
    //     }, {
    //       name: 'zone'
    //     }]
    //
    //     resolve(data)
    //   }, 500)
    // },
    // clickTreeNode(e, data) {
    //   console.log('clickTreeNode')
    // },
    // loadTreeNode(e, data) {
    //   console.log('testloadTreeNode')
    // },
    // openImportFileDataToDBModal(btnItem, record, parentDealApi) {
    //   this.$refs.importFileDataToDBModal.show(btnItem, record, parentDealApi)
    // },
    // returnImportFileDataToDBRows() {
    //
    // },
    // test() {
    //   console.log('test..........................')
    // },
    // setSearchForm() {
    //   const _this = this
    //   _this.form.setFieldsValue(this.searchFormParam)
    // },
    initUI() {
      const _this = this
      const param = getInitLoadUiPageUrlDataParam(_this)
      this.spinning = true
      loadUIMethod(param).then((res) => {
        _this.spinning = false
        _this.loading = false
        console.log('ui data', res)
        if (res.data === null) {
          console.log('ui data param', param)
          return
        }
        if (!res.data.success) {
          _this.disableSubmit = true
          _this.$message.success(res.data.message)
          return
        }
        _this.uidata = Object.assign({}, res.data.data)
        _this.$nextTick(() => {
          _this.tableExtProp.selectType = this.selectType
          _this.tableExtProp.selectTreeType = 'radio'
          _this.changeTableUi(_this.showTreeTplKey, _this.openParam)
          _this.$nextTick(() => {
            _this.changeTableUi(_this.showTableTplKey, _this.openParam)
          })
        })
      })
    },
    openTableSearch(btnItem, record) {
      this.nowBtnItem = btnItem
      const selectedRecord = Object.assign({}, record)
      this.treeCleanChildrenNode(selectedRecord)
      console.log('openTableSearch', record)
      this.$refs.downTableTplList.tableQueryByParam(selectedRecord)
    },
    openTableMenuDelete(btnItem, record) {
      this.nowBtnItem = btnItem
      console.log('openTableMenuDelete', record)
    },

    openGeneralModal(btnItem, globalData) {
      openLoadGeneralModal(btnItem, globalData, this)
    },
    processCustomRowOnClick(globalData) {
      // this.nowRow = record
      this.globalData[globalData.tableId] = globalData
      this.$emit('openTableMenuSelect', this.globalData)
      console.log('processCustomRowOnClick @@@@ this.globalData', this.globalData)
    },
    openTableMenuSelect(globalData) {
      this.globalData[globalData.tableId] = globalData
      // if (this.selectType === 'checkbox' || this.selectType === 'radio') {
      this.$emit('openTableMenuSelect', this.globalData)
      console.log('openTableMenuSelect @@@@ this.globalData', this.globalData)

      // }
    },
    openTreeMenuSelect(globalData) {
      this.globalData[globalData.tableId] = globalData
      this.changeTablelistData(globalData)
      // // 该模板固定内置,无需配置
      // const tplKey = this.showTableTplKey
      // this.changeTableUi(tplKey, selectedRecord)
      // if (this.selectType === 'checkbox' || this.selectType === 'radio') {
      this.$emit('openTableMenuSelect', this.globalData)
      // }

      // this.$emit('openTreeSelectData', record)
    },
    changeTablelistData(globalData) {
      const openParam = Object.assign({}, globalData.globalParam, globalData.clickRow)
      if (globalData.tableId === 'treeTplList') {
        const tplKey = this.showTableTplKey
        this.changeTableUi(tplKey, openParam)
      }
    },
    getShowKeyTableId(thisObj, openBtnItem) {
      const panelTplId = openBtnItem.panelTplId
      return thisObj.uidata.showKeyData[panelTplId]
    },
    reloadLoadData(openBtnItem, returnData, modalKey, modalForm) {
      const thisObj = this
      const tableId = thisObj.getShowKeyTableId(thisObj, openBtnItem)
      const tplObj = getTplKeyObj(thisObj, tableId)
      tplObj.reloadLoadData(openBtnItem, returnData, modalKey, modalForm)
    },
    returnQuickSelectRows(selectRows, formItem) {
      const thisObj = this
      triggerRefOpenReturn(selectRows, formItem, thisObj)
    },
    returnQuickSetLocalFormData(selectionRows, formItem) {
      const thisObj = this
      const tableId = thisObj.getShowKeyTableId(thisObj, formItem)
      const tplObj = getTplKeyObj(thisObj, tableId)
      const checkObj = getCheckRecordKeyStr(selectionRows)
      console.log(formItem,'tableId', tableId, tplObj, checkObj)
      tplObj.setTableSearchForm(checkObj)
    },
    returnQuickSetLocalListData(selectionRows, formItem) {
      const thisObj = this
      const tableId = thisObj.getShowKeyTableId(thisObj, formItem)
      if (tableId === thisObj.showTreeTplKey) {
        getQuickSetLocalTreeData(selectionRows, formItem, thisObj)
      } else {
        getQuickSetLocalListData(selectionRows, formItem, thisObj)
      }
    },
    returnQuickSubmitRemoteData(selectionRows, formItem) {
      const thisObj = this
      // 设置提交远程列表数据
      if (selectionRows.length !== 0) {
        const tableId = thisObj.getShowKeyTableId(thisObj, formItem)
        const tplObj = getTplKeyObj(thisObj, tableId)
        const tmpGlobalData = tplObj.globalData
        getQuickSubmitRemoteData(selectionRows, tmpGlobalData, formItem, thisObj)
      }
    }
  }
}
</script>
